<template>
	<basic-container>
		<avue-crud :option="option" :data="data" ref="crud" v-model="form" @row-del="rowDel" @row-update="rowUpdate"
		 @row-save="rowSave" :page="page" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
		 @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
			<template slot="menuLeft">
				<el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete">删 除
				</el-button>
				<el-button type="primary" size="small" plain icon="el-icon-refresh" @click="handleReset">密码重置
				</el-button>
			</template>
			<template slot-scope="{row}" slot="departmentId">
				<el-tag>{{row.departmentName}}</el-tag>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag :type='row.status=="1"?"":"info"'>{{row.status=="1"?"启用":"停用"}}</el-tag>
			</template>
		</avue-crud>
	</basic-container>
</template>

<script>
	import {
		getList,
		remove,
		update,
		add,
		resetPassword
	} from "@/api/system/user";
	import {
		getRoleTree
	} from "@/api/system/role";

	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			const validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.loginPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				form: {},
				selectionList: [],
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				init: {
					roleTree: [],
					deptTree: [],
				},
				option: {
					searchMenuSpan: 4,
					tip: false,
					border: true,
					index: true,
					refreshBtn: false,
					selection: true,
					menuWidth: 180,
					viewBtn: false,
					column: [{
							label: "登录账号",
							prop: "loginName",
							search: true,
							searchPlaceholder: '帐号&姓名',
							width: "120px",
							editDisabled: true,
							rules: [{
								required: true,
								message: "请输入登录账号",
								trigger: "blur"
							}]
						},
						{
							label: "真实姓名",
							prop: "trueName",
							width: "120px",
							rules: [{
								required: true,
								message: "请输入用户姓名",
								trigger: "blur"
							}]
						},
						{
							label: '密码',
							prop: 'loginPwd',
							hide: true,
							type: "password",
							editDisplay: false,
							viewDisplay: false,
							rules: [{
								required: true,
								validator: validatePass,
								trigger: 'blur'
							}]
						},
						{
							label: '确认密码',
							prop: 'loginPwd2',
							hide: true,
							type: "password",
							editDisplay: false,
							viewDisplay: false,
							rules: [{
								required: true,
								validator: validatePass2,
								trigger: 'blur'
							}]
						},
						{
							label: "所属角色",
							prop: "roleId",
							type: "select",
							filterable: true,
							width: "200px",
							dicData: [],
							multiple: true,
							rules: [{
								required: true
							}],
							props: {
								label: "name",
								value: "id"
							}
						},
						{
							label: "关联租户",
							prop: "tenants",
							type: "select",
							filterable: true,
							multiple: true,
							rules: [{
								required: true
							}],
							span: 24,
							dicData: [],
							props: {
								label: "name",
								value: "code"
							}
						},
						{
							label: "手机号码",
							prop: "mobile",
							hide: true
						},
						{
							label: "电子邮箱",
							prop: "email",
							hide: true
						},
						{
							label: "用户性别",
							prop: "sex",
							type: "radio",
							dicData: [{
									label: "男",
									value: 1
								},
								{
									label: "女",
									value: 2
								},
								{
									label: "未知",
									value: 3
								}
							],
							hide: true
						},
						{
							label: "状态",
							prop: "status",
							type: "switch",
							width: "70px",
							slot: true,
							value: true,
							dicData: [{
									label: "停用",
									value: false
								},
								{
									label: "启用",
									value: true
								}
							]
						}
					]
				},
				data: []
			};
		},
		computed: {
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			},
		},
		created() {
			getRoleTree().then(res => {
				this.findObject(this.option.column, 'roleId').dicData = res.data.data;
			});
			this.request({
				url: '/api/SysTenant/getpages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'tenants').dicData = res.data.data;
			});
		},
		methods: {
			rowSave(row, loading, done) {
				row.roleId = row.roleId == '' ? '' : row.roleId.join(",")
				row.tenants = row.tenants == '' ? '' : row.tenants.join(",")
				add(row).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				row.roleId = row.roleId == '' ? '' : row.roleId.join(",")
				row.tenants = row.tenants == '' ? '' : row.tenants.join(",")
				update(row).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.page);
					}).catch(() => {});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page, params);
				done();
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			handleDelete() {
				if (this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad(this.page);
						this.$refs.crud.toggleSelection();
					});
			},
			handleReset() {
				if (this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择账号密码重置为123456?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return resetPassword(this.ids);
					})
					.then(() => {
						this.$refs.crud.toggleSelection();
					});
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page, params = {}) {
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					const data = res.data;
					this.page.total = data.remark;
					data.data.forEach(ele => {
						ele.roleId = ele.roleId.split(",");
						ele.tenants = ele.tenants.split(",");
					});
					this.data = data.data;
				});
			}
		}
	};
</script>

<style>
</style>
